<template>
    <section class="main">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <span>{{$t('i18n.tips')}}</span>
            <el-button @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';" type="primary">{{$t('i18n.btn')}}
            </el-button>
            <div class="list">
                <h2>{{$t('i18n.title1')}}</h2>
                <p>{{$t('i18n.p1')}}</p>
                <p>{{$t('i18n.p2')}}</p>
                <p>{{$t('i18n.p3')}}</p>
            </div>
            <h2>{{$t('i18n.title2')}}</h2>
            <div>
                <i18n path="i18n.info" tag="p">
                    <a href="https://element.eleme.cn/2.0/#/zh-CN/component/i18n" place="action">{{ $t('i18n.value')
                        }}</a>
                </i18n>
            </div>
        </div>
    </section>
</template>

<script>
	export default {
		data () {
			return {}
		}
	}
</script>

<style scoped>
    .list {
        padding: 30px 0;
    }

    .list p {
        margin-bottom: 20px;
    }

    a {
        color: #409eff;
    }
</style>
